<template>
	<div class="check-group-info">
		<div class="modify-prop">
			<el-dialog title="编辑坐席属性" :close-on-click-modal="false" :visible.sync="showDialog" width="500px" :before-close="close">
				<div class="from" v-for="(attr, index) in schedulingAttributes" :key="attr._id">
					<el-input type="text" v-model="attr.key"></el-input>
					<el-input type="text" v-model="attr.value"></el-input>
					<i class="el-icon-close" @click="reomveProp(index)" v-show="index > 0"></i>
				</div>
				<el-button class="add-prop" type="primary" plain @click="addAttribute">添加属性</el-button>
				<div class="btn">
					<el-button @click="close">关闭</el-button>
					<el-button @click="confirm" type="primary">确定</el-button>
				</div>
			</el-dialog>
		</div>
	</div>
</template>

<script>
import { mapState } from 'vuex';
import { updateAccountInfo } from '../../../api/api';

export default {
	components: {
		// Table,
	},
	props: {
		attributes: {
			type: Array,
			defualt: () => []
		},
		show: {
			type: Boolean,
			default: () => false
		},
		acount: {
			type: Object,
			default: () => {}
		}
	},
	data() {
		return {
			uploadUrl: loginUrl,
			headers: {
				'x-access-token': localStorage.getItem(`zco_admin_token_${window.uid}`)
			},
			showDialog: false,
			schedulingAttributes: []
		};
	},
	watch: {
		show(newVal) {
			this.showDialog = newVal;
		},
		attributes: {
			immediate: true,
			handler: function (newVal) {
				if (newVal) {
					this.schedulingAttributes = [...newVal];
				}
			},
			deep: true
		}
	},
	mounted() {},
	computed: {
		...mapState({
			login: state => state.login.urls
		})
	},
	methods: {
		close() {
			this.$emit('close');
		},
		confirm() {
			let varify = true;
			this.schedulingAttributes.find(item => {
				if (item.value.trim() === '' || item.key.trim() === '') {
					varify = false;
					return;
				}
			});
			if (varify) {
				this.createAgentProp();
			} else {
				this.$message.error('请填写完整信息！');
			}
		},

		// 添加属性，别删
		addAttribute() {
			let obj = {
				key: '',
				value: ''
			};
			this.schedulingAttributes.push(obj);
		},
		reomveProp(index) {
			this.schedulingAttributes.splice(index, 1);
		},
		createAgentProp() {
			if (this.schedulingAttributes.length === 0) {
				this.$message.error('请添加属性！');
				return;
			}
			let params = [
				{
					op: 'replace',
					path: '/schedulingAttributes',
					value: this.schedulingAttributes
				}
			];
			let data = {};
			data.params = params;
			data.userId = this.acount.userId;
			updateAccountInfo(data)
				.then(res => {
					if (res.status === 200) {
						this.$message.success('属性更新成功！');
						// this.getGroupWithUserIdInit();
						// this.getAgentListInit();
						this.showDialog = false;
						this.$emit('update');
					}
				})
				.catch(err => {
					if (err.code === '1105') {
						this.$message.error(`该账户无工作台权限无法进行操作`);
					} else {
						this.$message.error('属性更新失败！');
					}
				});
		}
	}
};
</script>

<style lang="less" scoped>
.check-group-info {
	.add-group {
		display: flex;
		align-items: center;
		justify-content: space-between;
		p {
			padding: 10px 0;
		}
		.el-checkbox-group {
			height: 40px;
			width: 180px;
			text-align: center;
			line-height: 40px;
		}
	}
	.group-table {
		padding: 20px 0;
	}
	.btn {
		padding: 10px 0;
		text-align: right;
	}
	.modify-group {
		p {
			padding: 10px 0;
		}
		.select,
		.role,
		.radio {
			padding: 10px 0;
		}
		.el-input-number {
			width: 217px;
		}
		.el-checkbox-group {
			padding: 20px 0 0 76px;
		}
	}
	.add-prop {
		margin: 20px 0px 20px 10px;
	}
	.from {
		padding: 10px 0;
		display: flex;
		align-items: center;
		i {
			cursor: pointer;
			padding-left: 10px;
		}
		.el-input {
			padding-left: 10px;
			width: 40%;
		}
	}
}
</style>
<style lang="less">
.check-group-info {
	.el-checkbox__inner {
		width: 24px;
		height: 24px;
	}
	.el-checkbox__inner::after {
		height: 10px;
		left: 10px;
		top: 4px;
	}
	.upload {
		.avatar-uploader .el-upload {
			border: 1px dashed #d9d9d9;
			border-radius: 6px;
			cursor: pointer;
			position: relative;
			overflow: hidden;
		}
		.avatar-uploader .el-upload:hover {
			border-color: #409eff;
		}
		.avatar-uploader-icon {
			font-size: 28px;
			color: #8c939d;
			width: 178px;
			height: 178px;
			line-height: 178px;
			text-align: center;
		}
		.avatar {
			width: 178px;
			height: 178px;
			display: block;
		}
		.error {
			color: #f56c6c;
		}
	}
}
</style>
